<template>
  <div>
    <!-- Modal Dialog -->
    <div v-if="visible && type !== 'toast'" class="message-box-overlay" @click="handleOverlayClick">
    <div class="message-box" @click.stop>
      <div class="message-header">
        <div class="message-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,17H11V15H13V17M13,13H11V7H13V13Z" />
          </svg>
        </div>
        <h3>{{ title }}</h3>
        <button class="message-close" @click="close">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
          </svg>
        </button>
      </div>
      <div class="message-content">
        <div class="transfer-info" v-if="type === 'transfer'">
          <div class="info-row">
            <span class="label">来源单位：</span>
            <span class="value">{{ data.source }}</span>
          </div>
          <div class="info-row">
            <span class="label">目标单位：</span>
            <span class="value">{{ data.target }}</span>
          </div>
          <div class="info-row">
            <span class="label">投送数量：</span>
            <span class="value highlight">{{ data.count }}</span>
          </div>
          <div class="info-row">
            <span class="label">投送时间：</span>
            <span class="value">{{ currentTime }}</span>
          </div>
        </div>
        <div v-else>
          <p>{{ message }}</p>
        </div>
      </div>
      <div class="message-footer">
        <button class="confirm-btn" @click="close">{{ confirmText }}</button>
      </div>
    </div>
  </div>

  <!-- Toast Notification -->
  <div v-if="visible && type === 'toast'" class="toast-container">
    <div class="toast-message" :class="toastPosition">
      <div class="toast-header">
        <div class="toast-icon">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,17H11V15H13V17M13,13H11V7H13V13Z" />
          </svg>
        </div>
        <span class="toast-title">{{ title }}</span>
      </div>
      <div class="toast-content">
        <div class="gender-stat" v-if="toastType === 'gender'">
          <div class="gender-item">
            <span class="gender-label">男犯：</span>
            <span class="gender-value">{{ data.male || '49663' }}人</span>
          </div>
          <div class="gender-item">
            <span class="gender-label">女犯：</span>
            <span class="gender-value">{{ data.female || '5461' }}人</span>
          </div>
          <div class="gender-item">
            <span class="gender-label">未成年男犯：</span>
            <span class="gender-value">{{ data.minorMale || '414' }}人</span>
          </div>
          <div class="gender-item">
            <span class="gender-label">未成年女：</span>
            <span class="gender-value">{{ data.minorFemale || '27' }}人</span>
          </div>
        </div>
        <div v-else>
          <p>{{ message }}</p>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'MessageBox',
  data() {
    return {
      visible: false,
      title: '提示信息',
      message: '',
      type: 'info', // info, transfer, toast
      toastType: 'info', // for toast: info, gender
      data: {},
      confirmText: '确定',
      onConfirm: null,
      onCancel: null,
      closeOnOverlayClick: true,
      toastPosition: 'top-right', // top-right, top-left, bottom-right, bottom-left
      autoHide: true,
      hideDelay: 3000 // 3 seconds for toast
    }
  },
  computed: {
    currentTime() {
      return new Date().toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    }
  },
  methods: {
    show(options = {}) {
      this.title = options.title || '提示信息'
      this.message = options.message || ''
      this.type = options.type || 'info'
      this.toastType = options.toastType || 'info'
      this.data = options.data || {}
      this.confirmText = options.confirmText || '确定'
      this.onConfirm = options.onConfirm
      this.onCancel = options.onCancel
      this.closeOnOverlayClick = options.closeOnOverlayClick !== false
      this.toastPosition = options.position || 'top-right'
      this.autoHide = options.autoHide !== false
      this.hideDelay = options.hideDelay || 3000

      this.visible = true

      // Toast自动隐藏
      if (this.type === 'toast' && this.autoHide) {
        setTimeout(() => {
          this.close()
        }, this.hideDelay)
      }

      return this
    },

    close() {
      this.visible = false
      if (this.onCancel) {
        this.onCancel()
      }
    },

    confirm() {
      this.visible = false
      if (this.onConfirm) {
        this.onConfirm()
      }
    },

    handleOverlayClick() {
      if (this.closeOnOverlayClick) {
        this.close()
      }
    }
  }
}
</script>

<style scoped>
.message-box-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: messageFadeIn 0.3s ease-out;
}

@keyframes messageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.message-box {
  background:
    linear-gradient(145deg,
      rgba(0, 80, 120, 0.95) 0%,
      rgba(0, 100, 140, 0.9) 50%,
      rgba(0, 60, 100, 0.85) 100%
    ),
    rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(0, 100, 150, 0.6);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 100, 150, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  min-width: 400px;
  max-width: 500px;
  animation: messageSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(20px);
  overflow: hidden;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.message-header {
  display: flex;
  align-items: center;
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid rgba(0, 100, 150, 0.3);
  position: relative;
}

.message-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(0, 120, 160, 0.8) 0%,
    rgba(0, 100, 140, 0.6) 50%,
    rgba(0, 80, 120, 0.4) 100%
  );
}

.message-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border: 1px solid rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.message-icon svg {
  width: 18px;
  height: 18px;
  color: #00ffff;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.5));
}

.message-header h3 {
  flex: 1;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(45deg,
    rgba(0, 120, 160, 0.9) 0%,
    rgba(0, 100, 140, 0.8) 50%,
    rgba(0, 80, 120, 0.7) 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 10px rgba(0, 100, 150, 0.4);
  animation: titleGlow 3s ease-in-out infinite;
}

.message-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-close:hover {
  background: rgba(255, 68, 68, 0.2);
  color: #ff4444;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
}

.message-close svg {
  width: 20px;
  height: 20px;
}

.message-content {
  padding: 24px;
}

.transfer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 100, 150, 0.2);
}

.info-row:last-child {
  border-bottom: none;
}

.label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  min-width: 80px;
  margin-right: 16px;
  font-size: 14px;
}

.value {
  color: #ffffff;
  font-size: 14px;
  flex: 1;
}

.value.highlight {
  color: #00ff88;
  font-weight: 700;
  font-size: 16px;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.message-content p {
  margin: 0;
  color: #ffffff;
  line-height: 1.6;
  font-size: 14px;
}

.message-footer {
  padding: 16px 24px 20px 24px;
  border-top: 1px solid rgba(0, 100, 150, 0.3);
  display: flex;
  justify-content: flex-end;
}

.confirm-btn {
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.2) 0%,
      rgba(255, 0, 255, 0.15) 50%,
      rgba(255, 255, 0, 0.1) 100%
    ),
    rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.4);
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
}

.confirm-btn:hover {
  background:
    linear-gradient(135deg,
      rgba(0, 255, 255, 0.3) 0%,
      rgba(255, 0, 255, 0.2) 50%,
      rgba(255, 255, 0, 0.15) 100%
    ),
    rgba(0, 0, 0, 0.7);
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 6px 20px rgba(0, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-box {
    min-width: 320px;
    max-width: 90vw;
    margin: 20px;
  }

  .message-header {
    padding: 16px 20px 12px 20px;
  }

  .message-content {
    padding: 20px;
  }

  .transfer-info {
    gap: 12px;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .label {
    min-width: auto;
    margin-right: 0;
  }
}

@keyframes titleGlow {
  0%, 100% {
    background-position: 0% 50%;
    text-shadow:
      0 0 10px rgba(0, 100, 150, 0.4),
      0 0 20px rgba(0, 80, 120, 0.3);
  }
  50% {
    background-position: 100% 100%;
    text-shadow:
      0 0 15px rgba(0, 120, 160, 0.6),
      0 0 30px rgba(0, 100, 140, 0.4);
  }
}

/* Toast 样式 */
.toast-container {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
}

.toast-message {
  pointer-events: auto;
  min-width: 300px;
  max-width: 400px;
  background:
    linear-gradient(145deg,
      rgba(0, 80, 120, 0.95) 0%,
      rgba(0, 100, 140, 0.9) 50%,
      rgba(0, 60, 100, 0.85) 100%
    ),
    rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(0, 100, 150, 0.6);
  border-radius: 12px;
  box-shadow:
    0 15px 40px rgba(0, 100, 150, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  animation: toastSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.toast-message.top-right {
  position: fixed;
  top: 20px;
  right: 20px;
}

.toast-message.top-left {
  position: fixed;
  top: 20px;
  left: 20px;
}

.toast-message.bottom-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.toast-message.bottom-left {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast-message.top-left {
  animation: toastSlideInLeft 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes toastSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast-message.bottom-right,
.toast-message.bottom-left {
  animation: toastSlideInBottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes toastSlideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 12px 16px 8px 16px;
  border-bottom: 1px solid rgba(0, 100, 150, 0.3);
}

.toast-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border: 1px solid rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  flex-shrink: 0;
}

.toast-icon svg {
  width: 14px;
  height: 14px;
  color: #00ffff;
  filter: drop-shadow(0 0 3px rgba(0, 255, 255, 0.5));
}

.toast-title {
  color: #00ffff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  flex: 1;
}

.toast-content {
  padding: 16px;
}

.toast-content .gender-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast-content .gender-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
}

.toast-content .gender-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.toast-content .gender-value {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.3);
}

.toast-content p {
  margin: 0;
  color: #ffffff;
  line-height: 1.5;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toast-message {
    min-width: 280px;
    max-width: 90vw;
  }

  .toast-message.top-right,
  .toast-message.top-left,
  .toast-message.bottom-right,
  .toast-message.bottom-left {
    margin: 10px;
  }

  .toast-header {
    padding: 10px 14px 6px 14px;
  }

  .toast-content {
    padding: 14px;
  }

  .toast-content .gender-label,
  .toast-content .gender-value {
    font-size: 11px;
  }

  .toast-content p {
    font-size: 12px;
  }
}
</style>
